<%inherit file="/base_saas.html"/>
<%block name="right_content">
    <link rel="stylesheet" type="text/css" href="${STATIC_URL}css/paas_app.${CSS_SUFFIX}?v=${STATIC_VERSION}">
    <link rel="stylesheet" type="text/css" href="${STATIC_URL}css/paas_app_visiable.${CSS_SUFFIX}?v=${STATIC_VERSION}">
    <link rel="stylesheet" type="text/css" href="${STATIC_URL}assets/bk-icon-2.0/bk-magic-vue.min.css?v=${STATIC_VERSION}">
    <style>
    [v-cloak] { display: none }
    .bk-dialog [class*=" icon-"], .bk-dialog [class^=icon-] {
      background-image: none;
      width: auto;
    }
    .bk-infinite-tree .node-radio .node-checkbox.is-checked:after,
    .bk-infinite-list .node-checkbox.is-checked:after {
      left: 5px;
      top: 2px;
    }
    .bk-infinite-tree .arrow-icon {
      margin-right: 3px;
      top: 0;
    }
    .bk-infinite-list .user-content .user-icon {
      top: 0;
      margin-right: 5px;
    }
    .bk-infinite-tree .node-icon {
      top: -1px;
      margin-right: 5px;
      margin-left: 2px;
    }
    .bk-add-member-dialog .add-member-content-wrapper .right .content .user-content .user-icon {
      top: 0;
      margin-right: 5px;
    }
    .bk-add-member-dialog .add-member-content-wrapper .right .content .organization-content .folder-icon {
      top: 0;
      margin-right: 5px;
    }
    </style>
        <hr/>
        <div class="ml50 app-info">
            <div class="t_b mb10">${_(u'注册信息')}
            </div>
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey">${_(u'应用ID')}：</font>${app_info.get('code', '--')}
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey">${_(u'应用TOKEN')}：</font>${app_info.get('auth_token', '--')}
                </div>
            </div>
        </div>

        <hr/>

        <div class="ml50 app-info">
            <div class="t_b mb10">${_(u'应用简介')}
            </div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    <div class="introduction">${app_info.get('introduction', '--')}</div>
                </div>
            </div>
        </div>

        <hr/>
        <input type="hidden" value="${app_code}" id="app_code_id">

        <div class="ml50 app-info mt30">
            <div class="t_b mb10">${_(u'基本信息')}</div>
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey">${_(u'应用ID')}：</font>${app_info.get('code', '--')}
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey">${_(u'应用名称')}：</font>${app_info.get('name', '--')}
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey">${_(u'应用分类')}：</font>${app_info.get('tag', '--')}
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey">${_(u'语言')}：</font>${app_info.get('language', '--')}
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey">${_(u'创建者')}：</font>${app_info.get('creater', '--')}
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey">${_(u'状态')}：</font>${app_info.get('state', '--')}
                </div>
            </div>

            % if EDITION == "ee":
            <div class="row mt5 chmt">
                <div class="col-sm-10 col-xs-10" style="width:100%">
                    <div class="row" >
                        <div class="col-sm-2 col-xs-2">
                            <div><font class="t_grey"> ${_(u'可见范围')}：</font></div>
                        </div>
                        <div class="col-sm-8 col-xs-8" style="margin-left: -94px;">
                          <div id="app">
                                <div class="selected-text" ref="selectedText" style="font-size: 14px; margin-bottom: 10px;">--</div>
                                <div class="item">
                                <bk-button type="default" @click="handleChoose" size="small">${_(u'选择组织/人员')}</bk-button>
                                </div>

                                <bk-user-selector
                                    :show="isShow"
                                    :users="users"
                                    :departments="departments"
                                    api-host="${app_info.get('paas_host')}"
                                    @submit="handleSubmit"
                                    @cancel="handleCancel">
                                </bk-user-selector>
                                <div id="#error_tip"></div>
                          </div>
                        </div>
                         <div class="col-sm-2 col-xs-2">
                            <div id="tip_developer" style="color: #f00;" class="app-info-tips"></div>
                        </div>
                    </div>
                </div>
            </div>
            % endif

        </div>


        % if EDITION == "ee":
        <hr/>
        <div class="ml50 app-info">
            <%
                desk_info = app_info.get("desk_info", {})
            %>
            <div class="t_b mb10">${_(u'桌面信息')}
                 <div class="f_r mr30" style="display:${'none' if app_state==1 else ''}">
                    <a href="###" style="margin-left:10px;font-weight: 400;display:none;" class="can_a" id="desktop_cancle">${_(u'取消')}</a>
                    <a href="###" style="margin-left:10px;font-weight: 400;" id="desktop_operate" data="0" class="operate" edit-class="desktop">${_(u'编辑')}</a>
                </div>
                <span id="tip_desktop" style="color: #f00;" class="f_r app-info-tips"></span>
            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey f_l">${_(u'窗口宽度')}：</font>
                    <input type="number" class="form-control app-edit app-value" id="width" name="width" value="${desk_info.get('width')}" min="0" operation="modify" style="width: 90px; margin-top: -1px; margin-left: 85px; display: none;">
                    <div id="width_value" class="desktop f_l">${desk_info.get('width', '--')}</div><span class="desktop_wh_px">px</span>
                </div>
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey f_l">${_(u'窗口高度')}：</font>
                    <input type="number" class="form-control app-edit app-value" id="height" name="height"  value="${desk_info.get('height')}" min="1" operation="modify" style="width: 90px; margin-top: -1px; margin-left: 85px; display: none;">
                    <div id="height_value" class="desktop f_l">${desk_info.get('height', '--')}</div><span class="desktop_wh_px">px</span>
                </div>
            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-10 col-xs-10" style="width:100%">
                    <div class="row" >
                        <div class="col-sm-2 col-xs-2">
                            <div><font class="t_grey"> ${_(u'打开方式')}：</font></div>
                        </div>
                        <div class="col-sm-8 col-xs-8" style="margin-left: -93px;">
                            <div id="open_mode_div" class="app-edit" style="display:none;margin-left: 7px;">
                                <select class="form-control" id="open_mode_choices" style="width: 200px;">
                                    % for mode in open_mode_choices:
                                        % if mode[0] == app_info.get('open_mode'):
                                            <option value="${mode[0]}" selected>${mode[1]}</option>
                                        % else:
                                            <option value="${mode[0]}">${mode[1]}</option>
                                        % endif
                                    % endfor
                                </select>
                            </div>
                            <div id="open_mode_dis" class="desktop" >${app_info.get('open_mode_name', '--') or '--'}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        % endif


        <hr/>
        <div class="ml50 app-info">
            <div class="t_b mb10">${_(u'访问地址')}
            </div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    <font class="t_grey">${_(u'访问地址')}：</font> <span id="prod_access_span"></span>
                </div>
            </div>
        </div>

        <hr/>

        <div class="ml50 version-info mt30">
            <%
                version_info = app_info.get("version_info", {})
            %>
            <div class="t_b mb10">${_(u'当前版本信息')}</div>
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey">${_(u'部署版本')}：</font>${version_info.get('version', '--') or '--'}
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey">${_(u'部署文件')}：</font>${version_info.get('file_name', '--') or '--'}
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey">${_(u'文件大小')}：</font>${version_info.get('file_size', '--') or '--'} (M)
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey">MD5：</font>${version_info.get('file_md5', '--') or '--'}
                </div>
            </div>
        </div>

        <hr/>

        <div class="ml50">
            <div class="t_b mb10">${_(u'删除应用')}</div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    % if app_state == 1:
                        <div class="mb5">${_(u'请在删除前与其他同事提前沟通，确定')}<a href="###" onclick="REL_MANAGER.saas_app_del(this, '${app_info.get('code', '')}');" app_code="${app_info.get('code', '')}" class="hit saas_app_del"><strong>${_(u'删除')}</strong></a>!</div>
                    % else:
                        <div class="mb5">${_(u'只有未部署的应用才能删除，已部署过的应用不能删除！')}</div>
                    % endif
                </div>
            </div>
        </div>
        <hr/>

</%block>

<script src="${STATIC_URL}js/paas_release.${JS_SUFFIX}"></script>
<script src="${STATIC_URL}js/paas_app.${JS_SUFFIX}"></script>
<script src="${STATIC_URL}js/paas_app_visiable.${JS_SUFFIX}?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}assets/vue/vue-2.5.22.${JS_SUFFIX}?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}assets/components_vue/bk-magic-vue.min.js?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}assets/components_vue/bk-user-selector.umd.js?v=${STATIC_VERSION}"></script>
<script type="text/javascript">
    $(function(){
        APP_INFO.get_access_info('${app_code}');

        var data = JSON.parse('${app_info.get("visiable_labels", "[]")}');
        APP_VISIABLE.init('${app_code}', data);
    })
</script>
